<template>
  <svg
    v-if="!isActive"
    :style="`width: ${props.size}px; height: ${props.size}px;
  --theme: ${props.color}; --hover-theme: ${props.hoverColor};`"
    t="1752863042945" class="copy-icon" viewBox="0 0 1024 1024" version="1.1"
    xmlns="http://www.w3.org/2000/svg" p-id="5745" @click="handleClick"
  >
    <path
      d="M720 192h-544A80.096 80.096 0 0 0 96 272v608C96 924.128 131.904 960 176 960h544c44.128 0 80-35.872 80-80v-608C800 227.904 764.128 192 720 192z m16 688c0 8.8-7.2 16-16 16h-544a16 16 0 0 1-16-16v-608a16 16 0 0 1 16-16h544a16 16 0 0 1 16 16v608z"
      p-id="5746" fill="#707070"
    />
    <path
      d="M848 64h-544a32 32 0 0 0 0 64h544a16 16 0 0 1 16 16v608a32 32 0 1 0 64 0v-608C928 99.904 892.128 64 848 64z"
      p-id="5747" fill="#707070"
    />
    <path
      d="M608 360H288a32 32 0 0 0 0 64h320a32 32 0 1 0 0-64zM608 520H288a32 32 0 1 0 0 64h320a32 32 0 1 0 0-64zM480 678.656H288a32 32 0 1 0 0 64h192a32 32 0 1 0 0-64z"
      p-id="5748" fill="#707070"
    />
  </svg>
  <svg
    v-else
    :style="`width: ${props.size}px; height: ${props.size}px;
  --theme: ${props.color}; --hover-theme: ${props.hoverColor};`"
    t="1752863618698" class="ok-icon" viewBox="0 0 1035 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
    p-id="9748" width="200" height="200"
  >
    <path
      d="M517.613889 1010.377409c-66.653788 0-131.336031-13.065657-192.264544-38.829395-58.812166-24.872645-111.631728-60.482966-156.977244-105.828482S87.427403 767.565592 62.543619 708.742288C36.779881 647.824914 23.714224 583.142671 23.714224 516.477744s13.065657-131.336031 38.829395-192.253404c24.872645-58.823304 60.482966-111.631728 105.828482-156.977244s98.15394-80.944698 156.977244-105.828482c60.917374-25.763738 125.599617-38.829396 192.264544-38.829396s131.336031 13.065657 192.253404 38.829396c58.823304 24.872645 111.631728 60.482966 156.977244 105.828482 45.345516 45.345516 80.944698 98.15394 105.828482 156.977244 25.763738 60.917374 38.829396 125.599617 38.829396 192.253404s-13.065657 131.336031-38.829396 192.264544c-24.872645 58.812166-60.482966 111.631728-105.828482 156.977244-45.345516 45.345516-98.15394 80.944698-156.977244 105.828482-60.917374 25.763738-125.599617 38.829396-192.253404 38.829395z m0-898.678849c-223.196624 0-404.779185 181.582561-404.779185 404.779184s181.582561 404.779185 404.779185 404.779185 404.779185-181.582561 404.779184-404.779185-181.582561-404.779185-404.779184-404.779184z m-19.091677 579.099334l285.617718-285.617717c17.398599-17.398599 17.398599-45.612844 0-63.011444-17.398599-17.398599-45.612844-17.398599-63.011444 0L467.010921 596.286299 314.088152 443.36353c-17.398599-17.398599-45.612844-17.398599-63.011443 0s-17.398599 45.612844 0 63.011443l184.43406 184.43406c8.354001 8.354001 19.693165 13.054519 31.500152 13.054518s23.146152-4.689379 31.500152-13.054518z"
      p-id="9749" fill="#707070"
    />
  </svg>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps({
  size: {
    type: Number,
    default: 24,
  },
  color: {
    type: String,
    default: '#444444',
  },
  hoverColor: {
    type: String,
    default: '#808080',
  },
  copyText: {
    type: String,
    default: '',
  },
})

const isActive = ref(false)

function handleClick() {
  isActive.value = true
  navigator.clipboard.writeText(props.copyText)
  setTimeout(() => isActive.value = false, 1000)
}

defineExpose({ handleClick })
</script>

<style scoped lang="less">
.copy-icon {
  path {
    fill: var(--theme);
  }
  cursor: pointer ;

  &:hover {
    path {
      fill: var(--hover-theme);
    }
  }
}
</style>
